const cmtUrl = 'https://jsonplaceholder.typicode.com/posts'
const postsContainerEl = document.querySelector('#posts-container')

/* 
_limit	每次加载的文章数量	是
_page	请求的页码数	是
*/
let _limit = 5;
let _page = 1;
let isLoading = false;
async function getContent(_page, _limit) {
  let params = `?_page=${_page}&_limit=${_limit}`
  let cmtRes = await axios.get(`${cmtUrl}${params}`)
  const cmtdata = cmtRes.data;
  console.log(cmtdata)
  render(cmtdata)


}
getContent()
isLoading = true;

function render(cmtdata) {
  let str = '';
  console.log('cmtdata.length -->', cmtdata.length);
  if (cmtdata.length) {
    cmtdata.map(v => {
      str += `
            <div class="post">
                  <div class="number">${v.id}</div>
                  <div class="post-info">
                    <h2 class="post-title">${v.title}</h2>
                    <p class="post-body">${v.body}</p>
                  </div>
                </div>
            `
    }).join('')
    postsContainerEl.innerHTML = str
  }
  document.querySelector('.loader').classList.remove('show')

}
isLoading = false;
//  // 检查是否接近底部的标志变量
//  let nearBottom = false;

//  function handleScroll() {
//    const docHeight = document.documentElement.scrollHeight;
//    const viewportHeight = window.innerHeight;
//    const scrollTop = postsContainerEl.scrollTop;
//    const distanceFromBottom = docHeight - (scrollTop + viewportHeight);

//    if (distanceFromBottom <= 50) {
//      if (!nearBottom) {
//        console.log(1);
//        nearBottom = true; // 设置为true表示已经到达底部附近
//      }
//    } else {
//      nearBottom = false; // 用户离开了底部区域，重置标志
//    }
//  }

//  // 添加滚动事件监听器
//  window.addEventListener('scroll', handleScroll);

//  // 可选：如果你有一个方法来加载新内容（例如通过AJAX），你可以在这里调用它
//  // 并在加载完成后显示或隐藏加载指示器（.loader）


// 滚动到滚动条距离页面底部 50px 时，加载下一页数据
// let timeId;
// window.addEventListener('scroll', function () {

//   let top = document.documentElement.scrollTop;
//   let windowHeight = window.innerHeight;
//   let documentHeight = document.documentElement.scrollHeight;

//   if (documentHeight - (top + windowHeight) < 50) {
//     this.document.querySelector('.loader').classList.add('show')
//     clearTimeout(timeId)
//     timeId = setTimeout(function () {
//       // ii += 10
//       _page += 1
//       console.log(_page)
//       getContent(_page)
//       return
//       // this.document.querySelector('.loader').classList.remove('show')
//     }, 500)
//   }
// })

// ----------------------
// // 练习
// // // 3. 监听滚动事件
// window.addEventListener('scroll', () => {
//   const { scrollTop, scrollHeight, clientHeight } = document.documentElement
//   // 3.1 滚动到距离底部50px，且不在加载中，就加载更多文章
//   if (clientHeight + scrollTop >= scrollHeight - 50 && !isLoading) {
//           _page += 1
//       console.log(_page)
//       getContent(_page)
//       return
//  }
//  })


// // 3.2 监听滚动事件 进化
let timeID;
window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement
  // 3.1 滚动到距离底部50px，且不在加载中，就加载更多文章
  if (clientHeight + scrollTop >= scrollHeight - 50 && !isLoading) {
    this.document.querySelector('.loader').classList.add('show')
timeID = setTimeout(function() {
          _page += 1
      console.log(_page)
      getContent(_page)
      return

}, 500);

 }
 })